<template>
  <div class="paramInfo" v-if='Object.keys(paramInfo).length !==0 '>
      <table v-for="(table,index) in paramInfo.sizes"
        class="infoSize" :key='index'>
            <tr v-for="(tr,index) in table" :key='index'>
                <td v-for="(td,index) in tr" :key="index">{{td}} </td>
            </tr>
      </table>
      <table class="infoParam">
          <tr v-for="(info,index) in paramInfo.infos" :key='index'>
              <td class="infoParamKey">{{info.key}} </td>
              <td class="paramValue">{{info.value}} </td>
          </tr>
      </table>
      <div class="infoImg" v-if="paramInfo.image.length !==0">
          <img :src="paramInfo.image" alt="">
      </div>
  </div>
</template>

<script>
export default {
    name:'detailParamInfo',
    props:{
        paramInfo:{
            type:Object
        }
    }
}
</script>

<style scoped>
    .paramInfo{
        padding: 20px 15px;
        font-size: 14px;
        border-bottom: 5px solid #f2f5f8;
    }
    .paramInfo table{
        width: 100%;
        border-collapse: collapse;
    }
    .paramInfo table tr{
        height: 42px;
    }
    .paramInfo table tr td{
        border-bottom:1px solid rgba(100,100,100,.1) ;
    }
    .infoParamKey{
        width: 95px;
    }
    .infoParam{
        border-top: 1px solid tgba(0,0,0,.1);
    }
    .paramValue{
        color:#eb4868
    }
    .infoImg img{
        width: 100%;
    }
</style>